<template>
  <div class="box">
    <a-layout>
      <!-- 左侧 -->
      <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
        <div class="logo">
          <img v-if="collapsed" src="../icons/images/qiche.png" alt="汽车" />
          <span v-else>汽车管理系统</span>
        </div>
        <a-menu
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
          mode="inline"
          theme="dark"
        >
          <a-sub-menu key="sub1">
            <template #icon>
              <UserOutlined />
            </template>
            <template #title>Navigation One</template>
            <a-menu-item key="5">Option 5</a-menu-item>
            <a-menu-item key="6">Option 6</a-menu-item>
            <a-menu-item key="7">Option 7</a-menu-item>
            <a-menu-item key="8">Option 8</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <!-- 顶部 -->
        <a-layout-header class="header">
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <menu-fold-outlined
            v-else
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <a-menu v-model:selectedKeys="current" mode="horizontal" theme="dark">
            <a-menu-item key="mail">
              <template #icon>
                <mail-outlined />
              </template>
              邮件
            </a-menu-item>
            <a-menu-item key="message">
              <template #icon> <bell-outlined /> /> </template>
              消息
            </a-menu-item>

            <a-sub-menu key="admin">
              <template #icon>
                <user-outlined />
              </template>
              <template #title>管理员</template>
              <a-menu-item key="setting:1">个人中心</a-menu-item>
              <a-menu-item key="setting:2">修改密码</a-menu-item>
              <a-menu-item key="setting:3" @click="exit">退出系统</a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-header>
        <!-- 主体 -->
        <a-layout-content
          :style="{
            margin: '6px',
            padding: '6px',
            background: '#fff',
            minHeight: '280px',
          }"
        >
          Content
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
let $router = useRoute();
import {
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import {
  BellOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from "@ant-design/icons-vue";
import { ref } from "vue";
// 左侧菜单展开的选项
const openKeys = ref(["sub1"]);
const selectedKeys = ref(["1"]);
// 侧边栏是否折叠
const collapsed = ref(false);
const current = ref(["mail"]);
// 退出系统
const exit = () => {
  sessionStorage.clear();
  localStorage.clear();
  $router.push("/");
};
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
}
.ant-layout {
  width: 100vw;
  height: 100vh;
  .header {
    background: #fff;
    padding: 0;
    display: flex;
    justify-content: space-between;
  }
  .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.3);
    margin: 16px;
    text-align: center;
    line-height: 32px;
    color: #fff;
    font-size: 18px;
  }
}
span {
  overflow: hidden;
}
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
  color: #ffff;
}
.trigger:hover {
  color: #1890ff;
}
.ant-layout .header {
  background-color: #001529;
}
</style>

<style lang="less" scoped></style>
